<!--
 * @Author:
 * @Date: 2021/8/12 10:55
 * @LastEditTime: Please set LastEditTime
 * @LastEditors: Please set LastEditors
 * @Description: 样本列表
 * @file: index
-->
<template>
  <div class="sample-list">
    <!-- title -->
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      class="sample-list-row"
    >
      <span class="sample-list-row-title">样本列表</span>
      <span>
        <!-- element icon 不存在相同的 暂用 el-icon-document 替代 建议 el-icon-upload -->
        <el-button icon="el-icon-document" @click="exportExcel">导出</el-button>
        <el-button icon="el-icon-delete" type="danger" @click="goDel"
          >删除</el-button
        >
        <!-- element icon 不存在相同的 暂用 el-icon-document 替代 建议 el-icon-document-copy -->
        <el-button icon="el-icon-document">准备分析</el-button>
        <!-- element icon 不存在相同的 暂用 el-icon-document 替代 建议 el-icon-s-data -->
        <el-button icon="el-icon-document" @click="goBankAnalysis"
          >进行分析</el-button
        >
      </span>
    </el-row>
    <!-- inner -->
    <el-card class="sample-list-inner">
      <!-- search -->
      <el-form inline label-width="85px" :model="sampleSearch">
        <el-form-item label="案件编号:" prop="anjianbh">
          <el-input v-model="sampleSearch.anjianbh" clearable />
        </el-form-item>

        <el-form-item label="标引项:" prop="biaoyinxid">
          <!-- <el-input
            v-model="sampleSearch.index"
            clearable
          /> -->
          <el-select v-model="sampleSearch.biaoyinxid" placeholder="请选择">
            <el-option
              v-for="item in indexOptions"
              :key="item.biaoyinxid"
              :label="item.biaoyinxmc"
              :value="item.biaoyinxid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标引内容:" prop="biaoyinnr" label-width="100px">
          <el-input
            v-model="sampleSearch.biaoyinnr"
            aria-placeholder="输入关键字"
            clearable
          />
        </el-form-item>
        <el-form-item label-width="0">
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="sampleSearchHandle"
            >检索</el-button
          >
        </el-form-item>
      </el-form>
      <!-- total -->
      <div class="sample-list-inner-total">检索总量({{ pageTotal }}条)</div>
      <!-- table list -->
      <el-table
        :data="list"
        @selection-change="handleSelectionChange"
        empty-text="暂无数据"
      >
        <el-table-column type="selection" />
        <el-table-column prop="anjianbh" label="案件编号" />
        <el-table-column prop="juedingh" label="决定号" />
        <template v-for="(item, index) in tableColumn">
          <el-table-column
            :prop="item.biaoyinxmc"
            :label="item.biaoyinxmc"
            :key="index"
            v-if="item.column_name != 'id'"
          >
            <template v-slot="{ row }">
              <!-- element icon 不存在相同的 暂用 el-icon-document 替代 建议 el-icon-document -->
              <span>{{ row.biaoyinnrList[index] }}</span>
            </template>
          </el-table-column>
        </template>
        <!-- <el-table-column
          prop="test"
          label="test"
        />
        <el-table-column
          prop="test2"
          label="test2"
        /> -->
        <el-table-column label="操作" width="140">
          <template v-slot="{ row }">
            <!-- element icon 不存在相同的 暂用 el-icon-document 替代 建议 el-icon-document -->
            <el-button icon="el-icon-document" @click="showDetail(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- pagination -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import {
  sampleList,
  indexList,
  bankAnalysis,
  sampleDel,
  smpleExport,
} from "@/api/sampleBank";
export default {
  name: "SampleList",
  data() {
    return {
      // 搜索关键字
      sampleSearch: {
        anjianbh: "", // 案件编号
        biaoyinxid: "", // 标引项
        biaoyinnr: "", // 标索引内容
      },
      // 标引项
      indexOptions: [],
      // table 数据
      list: [],
      // 当前页
      currentPage: 1,
      pageTotal: 100,
      pageSize: 10,
      tableColumn: [], // 动态列
      // 选中样本id集合
      yangbenidList: [],
      yangbenkId: "", //样本库ID
      selRow: [], //选中行
    };
  },
  mounted() {
    this.yangbenkId = this.$route.query.yangbenkid;
    console.log(this.yangbenkId);
    this.getSampleList();
    this.getIndexList();
  },
  methods: {
    // 导出
    exportExcel() {
      if (this.selRow.length == 0) {
        return this.$message.warning("请选择需要删除的样本！");
      }
      const param = {
        yangbenkid: this.yangbenkId,
        yangbenidList: this.selRow.map((item) => item.yangbenid),
      };
      smpleExport(param).then((res) => {
        console.log(res);
        // 处理数据流
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = '样本数据表'; //下载的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    // 搜索
    sampleSearchHandle() {
      this.getSampleList();
    },
    // 查看详情
    showDetail(row) {
      this.$router.push(`/sample-addition?row=${JSON.stringify(row)}`);
      // console.log("查看详情", id);
    },
    // size改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
    },
    // 当前页改变
    handleCurrentChange(val) {
      console.log(`当前 ${val} 页`);
      this.currentPage = val;
    },
    // 获取样本列表
    async getSampleList() {
      const param = {
        yangbenkid: this.yangbenkId,
        anjianbh: this.sampleSearch.anjianbh,
        biaoyinxid: this.sampleSearch.biaoyinxid,
        biaoyinnr: this.sampleSearch.biaoyinnr,
        page: this.currentPage,
        size: this.pageSize,
      };
      sampleList(param).then((res) => {
        this.list = res.data.tableData;
        this.tableColumn = res.data.biaoyinmcList;
        this.pageTotal = res.data.total;
      });
      // this.getIndexList(param.yangbenkid)
    },
    // 获取标引列表
    async getIndexList() {
      indexList({ yangbenkid: this.yangbenkId }).then((res) => {
        this.indexOptions = res.data;
      });
    },
    // 进行分析
    async goBankAnalysis() {
      bankAnalysis({ yangbenkid: this.yangbenkId }).then((res) => {
        console.log(res, "bankAnalysis-------");
        location.href = res.data.url;
        // console.log(res, 'res-----')
      });
    },
    // 删除
    async goDel() {
      if (this.selRow.length == 0) {
        this.$message.warning("请选择需要删除的样本！");
      } else {
        this.$confirm("确认删除已选中的样本?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const param = {
              yangbenkid: this.yangbenkId,
              yangbenidList: this.selRow.map((item) => item.yangbenid),
            };
            console.log(param);
            this.delSample(param);
          })
          .catch(() => {});
      }
    },
    // 删除样本
    delSample(param) {
      sampleDel(param).then((res) => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.getSampleList();
      });
    },
    // 选中的行
    handleSelectionChange(val) {
      this.selRow = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.sample-list {
  font-family: "PingFang SC", 微软雅黑;
  width: 1200px;
  margin: auto;
  border-radius: 4px;

  &-row {
    margin: 12px 0;

    &-title {
      font-size: 24px;
      color: #303133;
    }
  }

  &-inner {
    &-total {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    /*.el-table {*/
    /*  .el-button {*/
    /*    font-weight: 700;*/
    /*  }*/
    /*}*/
  }
}
</style>
<style lang="scss">
.sample-list {
  .sample-list-inner {
    .el-form {
      &-item {
        margin-bottom: 12px;

        &__label {
          color: #303133;
          font-size: 14px;
          font-weight: 700;
        }
      }

      .el-input {
        .el-input__inner {
          height: 36px;
          line-height: 36px;
          background-color: #fafafa;
        }
      }
    }
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-select .el-input.is-focus .el-input__inner,
  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: #2d54b8;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    border-color: #2d54b8;
    color: #2d54b8;
    background-color: #fff !important;
  }

  .el-pagination.is-background .el-pager li:not(.disabled):hover,
  .el-pagination button:hover {
    color: #2d54b8;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    /*  .el-pagination__total  */
    color: #303133;
    background-color: white;
    border: 1px solid #dedfe6;
  }

  .el-select-dropdown__item.selected {
    color: #2d54b8 !important;
  }

  .el-button {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif;
    color: #303133;
    font-size: 14px;
    font-weight: 700;

    &:hover {
      color: #4f74c4;
      border-color: #4f74c4;
      background: white;
    }

    &:focus {
      color: #1c3991;
      border-color: #1c3991;
      background: white;
    }

    &--danger {
      color: white;
      background: #f55656;
      &:hover {
        color: #fff;
        background-color: #ff8683;
        border-color: #ff8683;
      }
      &:focus {
        color: #fff;
        background-color: #cf3e43;
        border-color: #cf3e43;
      }
    }

    &--primary {
      color: white;
      background-color: #2d54b8;
      border-color: #2d54b8;

      &:hover {
        background: #4f74c4;
        border-color: #4f74c4;
        color: white;
      }

      &:focus {
        background: #1c3991;
        border-color: #1c3991;
        color: white;
      }
    }
  }

  .el-table {
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
    font-size: 14px !important;
    color: #303133;

    .el-table__header tr th {
      background: #f1f1f1;
      color: #303133;
    }

    td {
      //padding: 0;
      //height: 36px;
      //line-height: 36px;

      .el-button {
        //height: 28px;
        //line-height: 28px;
        //padding: 0 6px;
        color: #303133;
        font-size: 14px;

        &:hover {
          color: #4f74c4;
          border-color: #4f74c4;
        }

        &:focus {
          color: #1c3991;
          border-color: #1c3991;
        }
      }
    }
  }

  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    border-color: #2d54b8;
  }

  .el-input__inner {
    color: #303133;
    font-family: "PingFang SC", 宋体;
  }
}
</style>
